<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>bootstrap 搜索下拉框</title>
  <!-- jquery -->
  <script src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
  <!-- bootstrap -->
  <link href="http://cdn.staticfile.org/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://cdn.staticfile.org/twitter-bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript"></script>
  <!-- bootstrap-select -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
	
	

</head>

 
<body>


	<div class="form-group">
		<div class="input-group col-xs-12" style="margin-top: 20%">
			<select class="form-control"
				style="width: 20%; margin-left: 20%; border-radius: 5px;">
				<option>查询个人信息</option>
				<option>查询转账信息</option>
				
			</select>
			<select class="form-control" id="cardId" 
				style="width: 20%; margin-left: 5%; border-radius: 5px;">
				<option>查询个人信息</option>
				<option>查询转账信息</option>
				
			</select>
			<button type="button" class="btn btn-info" id="btn" style="margin-left: 3%" data-toggle="modal" data-target="#myModal">查询</button>
		</div>
	</div>
	
	
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
	<div class="modal-dialog" style="width: 80%">
		<div class="modal-content" style="width: 100%;height: 500px">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					信息查询
				</h4>
			</div>
			<div class="modal-body" style="width: 100%;height: 76%">
				
			</div>
			
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>
				<button type="button" class="btn btn-primary">
					提交更改
				</button>
			</div>
		</div>
	</div>
</div>
	
	
	
	
</body>
<script type="text/javascript">
	$("#btn").click(function(){
		var cardId = $('#cardId option:selected').val();
		console.log(cardId);
		
		$.ajax({
      		url:"../acct/showUserInfo",
      		type:"post",
      		data:{
      				cardId : cardId
      
    				},
      		dataType:"json",
      		success:function(data){
        	console.log(data.status)
      		}

    		});
		
	});

</script>


 
</html>
